<template>
	<view class="content">
		<!-- 搜索框 -->
		<view class="search_box">
			<u-search placeholder="搜索订单(订单编号)" v-model="keyword" class="search"
				bg-color="rgb(246, 247, 250)"></u-search>
		</view>
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<!-- tab切换 -->

		<view class="tabcut">
			<view v-for="(item,i) in list" @click="cli(i)">
				<span>{{item.name}}</span>
			</view>
		</view>

		<!-- 商品盒子 -->
		<view class="goods_box" v-for="item in goodsList" @click="goods_navi">
			<!-- 订单编号 -->
			<view
				style="display: flex; justify-content: space-between; width: 95%; height: 80rpx; align-items: center; border-bottom: 2rpx solid #efefef;">
				<p>订单编号：<span>{{item.orderNumber}}</span></p>
				<span style="color: #1AB784;">{{item.statusStr}}</span>
			</view>
			<!-- 商品信息 -->
			<view class="goods_newsimps">
				<image :src="item.pic" mode="" style="width: 144rpx; height:144rpx;"></image>
				<div class="goods_content">
					<p class="goods_name" style="font-size: 14px;">{{item.goodsName}}</p>
					<p class="goods_card_prop" style="font-size: 12px;color: #969799;">{{item.property}}</p>
				</div>
				<p class="goodes_price">
					<span>￥{{item.amountSingle}}</span>
					<span style="font-size: 24rpx; color: #c1c1c1; text-align: right;">×{{item.number}}</span>
				</p>
			</view>
			<h1>查看全部{{item.goodsNumber}}件商品</h1>
			<div class="list_item_total"><span>共{{item.goodsNumber}}件商品</span>实付款￥<span
					style="font-size: 30rpx;font-weight: 600;">{{item.amount}}</span></div>
			<u-button @click="showuToast" shape="circle" size="medium" :plain="true"
				style="color: #000; width: 300rpx; height: 80rpx; margin-left: 60%;"><u-icon name="server-fill"
					size="40rpx"></u-icon>联系客服</u-button>
		</view>
		<u-toast ref="uToast" style="z-index: 1000" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				scrollTop: 0,
				token: "",
				status: "0",
				goodsList: [],
				orderList: [],
				list:[
					{
						name:"全部"
					},
					{
						name:"待付款"
					},
					{
						name:"待发货"
					},
					{
						name:"待收货"
					},
					{
						name:"售后/退款"
					}
				]

			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(option){
			let that = this
			uni.getStorage({
				key: 'token',
				success: function(res) {
					
					console.log(res.data);
					that.token = res.data
					that.getData()
				}
			})
			this.status="0"
		},
		onShow() {
		
			
		},
		methods: {
			getData() {

				var that = this
				uni.request({
					url: "https://api.it120.cc/xiaochengxu/order/list",
					method: "post",
					dataType: "json",
					data: {
						status:that.status,
						token: that.token
					},
					header: {
						"X-Token": that.token,
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success(res) {
						// console.log(res);
						// console.log(res.data.data.goodsMap);
						// that.goodsList1 = res.data.data.orderList
						that.goodsList=[]
						if(res.data.msg=="success"){
						let temp = res.data.data.goodsMap
						for (let i in temp) {
							// console.log(temp[i]);
							that.goodsList.push(temp[i][0])
							// console.log(that.goodsList);
						}

						that.orderList = res.data.data.orderList
						that.goodsList.forEach((r, i) => r.orderNumber = that.orderList[i].orderNumber)
						that.goodsList.forEach((r, i) => r.goodsNumber = that.orderList[i].goodsNumber)
						that.goodsList.forEach((r, i) => r.statusStr = that.orderList[i].statusStr)
						console.log(that.goodsList);
						}
					}
				})
			},

			showuToast() {
				
				this.$refs.uToast.show({
					message: '未开放：客服',
					type: 'default',
					duration:1000
					// url: '/pages/user/index'
				})
			},
			cli(res){
				this.status=res
				console.log(res);
				if(res==0){
					this.status=""
				}else if(res==1){
					this.status=0
				}else if(res==2){
					this.status=1
				}else if(res==3){
					this.status=2
				}
				console.log(res);
				this.getData()
			},
			goods_navi:function(){
				uni.navigateTo({
					url:"/pages/orderList/orderDetail"
				})
			}
		},
		mounted() {

			

		}

	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: rgb(247, 248, 250);

		// 搜索框
		.search_box {
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: center;

			.search {
				width: 90%;
				// margin-top: 20rpx!important;
				background-color: #fff !important;
			}
		}

		// 回到顶部
		.wrap {
			height: 200vh;
		}

		// tab切换
		.tabcut {
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-around;
			background-color: #fff;
			margin-bottom: 20rpx;

			span {
				height: 100%;
				width: 13%;
				text-align: center;
				line-height: 100rpx;
			}

			span:hover {
				border-bottom: 7rpx solid rgb(27, 167, 132);
			}
		}

		// 商品盒子
		.goods_box {
			width: 95%;
			height: 570rpx;
			background-color: #fff;
			border-radius: 0.8rem;
			margin-bottom: 20px;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			font-size: 28rpx;

			.goods_content {
				flex: 1;
				margin-right: 3.2vw;
			}

			.goods_newsimps {
				width: 95%;
				height: 30%;
				display: flex;
				justify-content: space-between;

				;

				.goodes_price {
					display: flex;
					flex-direction: column;

				}
			}

			h1 {
				width: 95%;
				height: 18%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				font-weight: 400;
				color: #c1c1c1;
				border-bottom: 2rpx solid #efefef;
			}

			.list_item_total {
				width: 95%;
				
				padding: 0 3.2vw;
				height: 12.8vw;
				line-height: 12.8vw;
				text-align: right;
				// display: 1;
				// justify-content: end;
				// align-items: center;
				font-size: 26rpx;
				font-weight: 400;
				border-bottom: 2rpx solid #efefef;
			}
		}


	}
</style>